<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>原型管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .hover-bg:hover {
            background-color: #f0f0f0;
            transition: background-color 0.2s ease;
        }
        .delete-btn{
            display: none;
        }
    </style>
</head>
<body class="container py-4">
<div id="header" style="display: none">
    <h2 class="mb-4">📁 原型项目列表</h2>
    <form method="post" action="/upload" enctype="multipart/form-data" class="mb-4">
        <div class="input-group">
            <input class="form-control" type="file" name="file" required>
            <button class="btn btn-primary" type="submit">上传原型</button>
        </div>
        <div class="form-text">格式要求：项目名_版本.zip，压缩包内必须有 index.html</div>
    </form>
</div>

<div th:each="entry : ${projects}" class="mb-3">
    <h5 th:text="${entry.key}"></h5>
    <ul>
        <li th:each="ver : ${entry.value}" class="mb-2 d-flex align-items-center justify-content-between p-2 rounded hover-bg">
            <span>
                <a th:href="@{'/prototypes/' + ${entry.key} + '/' + ${ver} + '/index.html'}" target="_blank"
                   th:text="${ver}"></a>
            </span>
            <form method="post" action="/delete" class="delete-btn">
                <input type="hidden" name="project" th:value="${entry.key}" />
                <input type="hidden" name="version" th:value="${ver}" />
                <button class="btn btn-sm btn-danger" onclick="return confirm('确定删除该版本？')">删除</button>
            </form>
        </li>
    </ul>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.body.addEventListener('dblclick', function (event) {
            if (event.target === document.body) {
                const form = document.getElementById('header');
                if (form.style.display === 'none') {
                    form.style.display = 'block';
                    form.querySelector('input[type="file"]').focus();
                }
                // delete-btn也修改display:inline
                document.querySelectorAll('.delete-btn').forEach(function (btn) {
                    btn.style.display = 'inline';
                })
            }
        });
    });
</script>
</body>
</html>